<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人基本信息</title> 
        <link rel="stylesheet" href="css/3.css">
        <script src="https://unpkg.com/vue@next"> </script>
	</head>
	<body>
        <div class="kuang">
        <h2 class="title">个人基本信息</h2>
        <div class="border">
            <div id="counter">
                <h2 class="per">{{persional}}</h2>
                <p><span style="margin-left: 8vw;">姓名：</span>{{name}}</p>
                <p><span style="margin-left: 8vw;">年龄：</span>{{age}}</p>
                <p><span style="margin-left: 8vw;">兴趣爱好：</span>{{hob}}</p>
                <p><span style="margin-left: 8vw;">专业：</span>{{career}}</p>
             </div>
        </div>
    </div>
	</body>
   
    <script>
    const Counter={
        data() {                                                                                                                                                                                                                    
            return{
                name:"张某",
                age:20,
                hob:"吃饭、睡觉、打豆豆",
                career:"软件"
            }
        }
    }
    Vue.createApp(Counter).mount('#counter')
    </script>
</html>
